<script setup lang="ts">
import {ref, watch} from 'vue';
import $bus from '@/utils/emitter.ts'
import LayoutStore from "@/store/modules/setting.ts";
const activeKey = ref('RECOMMEND')
const layoutStore = LayoutStore()
const change = (type:string) => {
  layoutStore.setIsCategoryOrTag(false)
  const el1 = document.querySelector('.tag-active')
  if (el1) {
    el1.classList.remove('tag-active')
  }
  const el2 = document.querySelector('.category-active')
  if (el2) {
    el2.classList.remove('category-active')
  }
  $bus.emit('getArticlePageHandle', {params:{listType:activeKey.value}})
}

watch(
() => layoutStore.isCategoryOrTag,(newVal) =>{
    if (newVal) {
        activeKey.value = ''
      }
    },
  {
    immediate: true
  }
)
</script>

<template>
  <div class="main-header">
    <a-tabs v-model:activeKey="activeKey" @change="change">
      <a-tab-pane key="RECOMMEND" tab="首页"></a-tab-pane>
      <a-tab-pane key="ATTENTION" tab="关注"></a-tab-pane>
      <a-tab-pane key="HOT" tab="热门"></a-tab-pane>
      <a-tab-pane key="LATEST" tab="最新" ></a-tab-pane>
    </a-tabs>
<!--    <a-checkable-tag-->
<!--        style="margin-left: 10px;transform: translateY(-7px)"-->
<!--    >-->
<!--      分类-->
<!--    </a-checkable-tag>-->
<!--    <a-tag :bordered="false" closable style="height: 100%;transform: translateY(-7px);margin-left: 10px;">Tag 3</a-tag>-->
  </div>
</template>
<style scoped lang="scss">
.main-header{
  display: flex;
  align-items: center;
}
</style>
